import { BellOutlined, SearchOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Card, Divider, Input, Progress, Select, Space, Table, Tabs, Tag } from 'antd';
import React from 'react';

const { Option } = Select;
const { TabPane } = Tabs;

/**
 * 主题演示页面
 * 展示各种组件在不同主题下的效果
 */
const ThemeDemo: React.FC = () => {
  // 示例数据
  const dataSource = [
    {
      key: '1',
      name: '张三',
      age: 32,
      address: '北京市朝阳区',
      status: 'active',
    },
    {
      key: '2',
      name: '李四',
      age: 28,
      address: '上海市浦东新区',
      status: 'inactive',
    },
    {
      key: '3',
      name: '王五',
      age: 35,
      address: '广州市天河区',
      status: 'active',
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>{status === 'active' ? '活跃' : '非活跃'}</Tag>
      ),
    },
  ];

  return (
    <div style={{ minHeight: '100vh' }}>
      <Card title="🎨 主题演示页面" extra={<Button type="primary">操作按钮</Button>}>
        <p>这个页面展示了各种 Ant Design 组件在不同主题下的效果。点击右上角的主题切换按钮来体验浅色和深色主题。</p>

        <Divider>按钮组件</Divider>
        <Space wrap>
          <Button type="primary">主要按钮</Button>
          <Button>默认按钮</Button>
          <Button type="dashed">虚线按钮</Button>
          <Button type="text">文本按钮</Button>
          <Button type="link">链接按钮</Button>
          <Button danger>危险按钮</Button>
        </Space>

        <Divider>输入组件</Divider>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Input placeholder="请输入内容" prefix={<UserOutlined />} style={{ maxWidth: 300 }} />
          <Select placeholder="请选择选项" style={{ width: 200 }}>
            <Option value="option1">选项1</Option>
            <Option value="option2">选项2</Option>
            <Option value="option3">选项3</Option>
          </Select>
          <Input.Search placeholder="搜索内容" enterButton={<SearchOutlined />} style={{ maxWidth: 300 }} />
        </Space>

        <Divider>进度条</Divider>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Progress percent={30} />
          <Progress percent={50} status="active" />
          <Progress percent={70} status="exception" />
          <Progress percent={100} />
        </Space>

        <Divider>标签</Divider>
        <Space wrap>
          <Tag color="blue">蓝色标签</Tag>
          <Tag color="green">绿色标签</Tag>
          <Tag color="orange">橙色标签</Tag>
          <Tag color="red">红色标签</Tag>
          <Tag color="purple">紫色标签</Tag>
        </Space>
      </Card>

      <div style={{ marginTop: 24 }}>
        <Card title="📊 数据表格">
          <Table dataSource={dataSource} columns={columns} pagination={false} size="middle" />
        </Card>
      </div>

      <div style={{ marginTop: 24 }}>
        <Card title="📑 标签页示例">
          <Tabs defaultActiveKey="1">
            <TabPane
              tab={
                <span>
                  <UserOutlined />
                  用户信息
                </span>
              }
              key="1"
            >
              <p>这里是用户信息的内容，展示了标签页在不同主题下的效果。</p>
              <p>主题切换会自动更新所有组件的颜色方案，包括文字、背景、边框等。</p>
            </TabPane>
            <TabPane
              tab={
                <span>
                  <SettingOutlined />
                  系统设置
                </span>
              }
              key="2"
            >
              <p>这里是系统设置的内容。</p>
              <p>深色主题采用了现代化的暗色调设计，更适合夜间使用。</p>
            </TabPane>
            <TabPane
              tab={
                <span>
                  <BellOutlined />
                  消息通知
                </span>
              }
              key="3"
            >
              <p>这里是消息通知的内容。</p>
              <p>浅色主题采用了清爽的浅色调设计，适合日间使用。</p>
            </TabPane>
          </Tabs>
        </Card>
      </div>

      <div style={{ marginTop: 24 }}>
        <Card title="🎯 主题特色">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
            <Card size="small" title="🌈 优美色调">
              <p>采用现代化的配色方案，浅色主题清新淡雅，深色主题深邃温暖。</p>
            </Card>
            <Card size="small" title="✨ 柔和过渡">
              <p>所有组件都添加了平滑的过渡动画，切换主题时体验更流畅。</p>
            </Card>
            <Card size="small" title="🚀 现代化设计">
              <p>采用了毛玻璃效果、柔和阴影等现代设计元素，提升视觉体验。</p>
            </Card>
            <Card size="small" title="📱 响应式适配">
              <p>完美适配不同屏幕尺寸，在移动端和桌面端都有出色表现。</p>
            </Card>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default ThemeDemo;
